<template>
	<view class="order">
		<view class="order-tabs-box">
			<tabs :list="tabs" v-model="active" itemColor="#333" lineColor="#2073F5" @input="select"></tabs>
		</view>
		<template v-if="orderList.length">
			<view class="order-list">
				<view class="order-item" v-for="(data,index) in orderList" :key="index" @click="goOrderInfo(data.type,data.order_id)">
					<view class="order-item-top">
						<text>订单编号：{{data.order_sn}}</text>
						<text>{{data.status_name}}</text>
					</view>
					<view class="order-item-middle" v-for="(item,gIndex) in data.goods_list" :key="gIndex">
						<block v-if="item.have_group!=1">
							<image :src="item.sku_info.img?item.sku_info.img:''"></image>
							<view class="order-item-info">
								<view>{{item.goods_name}}</view>
								<view>
									<text v-if="item.sku_info.size">{{item.sku_info.size}}</text>
									<text v-if="item.sku_info.color">{{item.sku_info.color}}</text>
									<text v-if="item.sku_info.lining">{{item.sku_info.lining}}</text>
								</view>
							</view>
							<view class="order-item-num">x{{item.goods_number}}</view>
						</block>
						<block v-else>
							<image :src="item.image_thumb"></image>
							<view class="order-item-info">
								<view class="package">{{item.goods_name}}</view>
							</view>
							<view class="order-item-num">x{{item.goods_number}}</view>
						</block>
					</view>
					<view class="order-item-bot">
						<view :class="['tag',{active: data.type==2}]">{{data.type==1?'店铺订单':'进货订单'}}</view>
						<view>共{{data.goods_list?data.goods_list.length:0}}件商品 <text><text>¥</text>{{data.order_amount}}</text></view>
					</view>
					<view class="order-item-btn" v-if="(data.store_id==store_id && data.goods_store_id==1 && data.pay_status==0 && data.order_status==0) || (data.store_id==store_id && data.type==2 && data.pay_status==2 && data.shipping_status==1 && data.order_status==0)">
						<button size="mini" v-if="data.store_id==store_id && data.goods_store_id==1 && data.pay_status==0 && data.order_status==0">立即支付</button>
						<button size="mini" v-if="data.store_id==store_id && data.type==2 && data.pay_status==2 && data.shipping_status==1 && data.order_status==0">
							确认收货
						</button>
					</view>
					<view class="order-item-btn" v-if="(data.store_id==store_id && data.goods_store_id==1 && data.wait_status==1 && data.pay_status==2 && data.type==1) || (data.store_id==store_id && data.goods_store_id==store_id && data.pay_status==2 && data.shipping_status==0)">
						<button size="mini" v-if="data.store_id==store_id && data.goods_store_id==1 && data.wait_status==1 && data.pay_status==2 && data.type==1">商家确认</button>
						<button size="mini" v-if="data.store_id==store_id && data.goods_store_id==store_id && data.pay_status==2 && data.shipping_status==0">确认发货</button>
					</view>
				</view>
			</view>
			<loading :text="'加载中'" v-if="loading"></loading>
			<no-more :text="'数据加载完毕'" v-if="noMore"></no-more>
		</template>
		<nothing :text="'暂无订单'" :btn="false" v-else></nothing>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store_id: '',
				active: 0,
				orderList: [],
				loading: false,
				noMore: false,
				page: 0,
				tabs: [{
					title: '全部订单'
				},{
					title: '待支付'
				},{
					title: '待平台确认'
				},{
					title: '待发货'
				},{
					title: '待收货'
				},{
					title: '已完成'
				},{
					title: '已取消'
				}]
			}
		},
		onLoad(){
			this.store_id = JSON.parse(uni.getStorageSync('userInfo')).store_id
		},
		onTabItemTap(e){
			uni.setStorageSync('orderType','')
		},
		onShow() {
			if(uni.getStorageSync('orderType')){
				this.active = uni.getStorageSync('orderType')
			}
			this.orderList = []
			this.init()
		},
		onHide() {
			uni.setStorageSync('orderType','')
		},
		methods: {
			init(page){
				this.loading = false
				this.noMore = false
				let data = {
					store_id: this.store_id,
					page: page?page:0,
					limit: 10,
					type: 2
				}
				switch (this.active){
					case 1:
						data.order_status = 0;
						data.shipping_status = 0;
						data.pay_status = 0;
						break;
					case 2:
						data.store_id = JSON.parse(uni.getStorageSync('userInfo')).store_id
						data.waite_status = 1
						data.order_status = 0
						data.shipping_status = 0
						data.pay_status = 2
						break;
					case 3:
						data.order_status = 0;
						data.shipping_status = 0;
						data.pay_status = 2;
						break;
					case 4:
						data.order_status = 0;
						data.shipping_status = 1;
						data.pay_status = 2;
						break;
					case 5:
						data.order_status = 1;
						data.shipping_status = 2;
						data.pay_status = 2;
						break;
					case 6:
						data.order_status = 2;
						break;
				}
				this.$api.StockOrderList(data).then(res => {
					if(this.refresh){
						uni.stopPullDownRefresh({
							success(){
								uni.showToast({
									icon: 'none',
									title: '刷新成功'
								})
							}
						})
					}
					this.refresh =false
					this.loading = false
					if(res.datas.data.length){
						res.datas.data.forEach(item => {
							this.orderList.push(item)
						})
					}else{
						this.noMore = true
					}
				}).catch(res => {
					uni.stopPullDownRefresh({
						success(){
							uni.showToast({
								icon: 'none',
								title: res.error
							})
						}
					})
				})
			},
			select(e){
				this.loading = false
				this.noMore = false
				this.orderList = []
				this.page = 0
				this.init(this.page)
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			goOrderInfo(type,id){
				uni.navigateTo({
					url: '/pages/order/order-info?id='+id
				})
			}
		},
		onPullDownRefresh() {
			this.refresh = true
			this.orderList = []
			this.init()
		},
		onReachBottom(){
			this.page++
			if(!this.noMore){
				this.loading = true
				this.init(this.page)
			}
		}
	}
</script>
<style lang="scss">
	@import '../../../static/scss/order.scss'
</style>